<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我的博客</title>
<link href="css/style.css" rel="stylesheet">
<link href="css/animation.css" rel="stylesheet">
<link href="css/lrtk.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>

<body>
<header>
	<nav id="nav">
    	<ul>
        	<li><a href="#">网站首页</a></li>
            <li><a href="#" target="_blank" title="个人博客">个人博客</a></li>
            <li><a href="#" target="_blank" title="相册">相册</a></li>
            <li><a href="#" target="_blank" title="说说">说说</a></li>
            <li><a href="#" target="_blank" title="心情日志">心情日志</a></li>
            <li><a href="#" target="_blank" title="文章">文章</a></li>
        </ul>
         <script src="js/silder.js"></script><!--获取当前页导航 高亮显示标题--> 
    </nav>
</header>

<div id="mainbody">
	<div class="info">
        <figure>
            <img src="images/art.png" alt="我的青春">
            <figcaption>
                <strong>所谓青春，所谓怀念</strong>
             所谓青春，无非就是一个成长的过程。由一个不谙世事，懵懵懂懂的少年，成长为一个能够有担当能谅解别人的人还有一起无心无肺，一起畅玩的朋友，个个远去···如此，你便安然度过青春。诚然，青春里的小伙伴，已渐渐淡入我的生活，我们终究还是有啦自己的生活，缺席啦对方的人生。抬头望天空，天空依旧如初，只是我们不再是那个少年。人生也就是如此吧，慢慢的老去，再回忆过去的似水年华。什么惆怅，怨恨，悔恨也终究会随着时光的远去而埋藏在心底。回想过去，才发现。所谓青春，所谓怀恋，只不过是我们年少时的臆想臆断，和心有不甘。
            </figcaption>
        </figure>
        <div class="card">
        	 <h1>我的名片</h1>
              <p>网名：imxintian | 玉面小飞龙</p>
              <p>职业：学生</p>
              <p>电话：18100**5247</p>
              <p>Email：1971088879@qq.com</p>
              <ul class="linkmore">
                <li><a href=" https://user.qzone.qq.com/1971088879/infocenter" class="talk" title="给我留言"></a></li>
                <li><a href="https://user.qzone.qq.com/1971088879/infocenter" class="address" title="联系地址"></a></li>
                <li><a href="https://user.qzone.qq.com/1971088879/infocenter" class="email" title="给我写信"></a></li>
                <li><a href="https://user.qzone.qq.com/1971088879/infocenter" class="photos" title="生活照片"></a></li>
                <li><a href="https://user.qzone.qq.com/1971088879/infocenter" class="heart" title="关注我"></a></li>
              </ul>
        </div>
    </div>

<!--info结束-->

<!--博客的列表开始-->
    <div class="blogs">
        <ul class="bloglist">
            <li>
                <div class="row_box">
                    <div class="ti"></div><!--三角形-->
                    <div class="ci"></div><!--圆形-->
                    <h2 class="title"> <a href="#">今天做啦一个博客主页</a></h2>
                    <ul class="textinfo">
                        <a href="#"><img src="images/s1.jpg"></a>
                        <p>基于这几天的学习，然后做啦一个博客主页，同样对于超链接部分同样做空。（因为没有地方链接）但都有预留，方便以后链接。仅对热门文章处做啦三处链接。大家可以点一下。图文并茂第一处设啦一处链接。嘿嘿，音乐是可以听的哦。以后有服务器的话可以简单搞一下。</p>
                    </ul>
                    <ul class="details">
                        <li class="likes"><a href="#">19</a></li>
                        <li class="comments"><a href="#">54</a> </li>
                        <li class="icon_time"><a href="#">2017-6-27</a></li>
                    </ul>
                </div>
            </li>
            
             <li>
                <div class="row_box">
                    <div class="ti"></div><!--三角形-->
                    <div class="ci"></div><!--圆形-->
                    <h2 class="title"> <a href="#">班级第一次旅游</a></h2>
                    <ul class="textinfo">
                        <a href="#"><img src="images/classmates.png"></a>
                        <p>大学的第一次班级旅游我们去啦，天目山大峡谷。同学们也是兴致勃勃，一早随大巴车出发。车上导游一边介绍景点，一边让同学们做游戏。到啦景点，同学们也是相约结伴游玩。这里景色确实迷人，青山绿树，雄石突兀，还有好玩刺激的缆车。结束时，导游给我们拍啦集体照。</p>
                    </ul>
                    <ul class="details">
                        <li class="likes"><a href="#">10</a></li>
                        <li class="comments"><a href="#">34</a> </li>
                        <li class="icon_time"><a href="#">2015-4-9</a></li>
                    </ul>
                </div>
            </li>
            
             <li>
                <div class="row_box">
                    <div class="ti"></div><!--三角形-->
                    <div class="ci"></div><!--圆形-->
                    <h2 class="title"> <a href="#">大学第一次旅游</a></h2>
                    <ul class="textinfo">
                        <a href="#"><img src="images/wj.png"></a>
                        <p>大学第一次旅游——我们去啦，观前街，博物馆，忠王府···
                        然而我们更兴奋的是历史遗留的珍贵小巷。朋友们对这种事物简直欣喜若狂，不停的拍照留念，不停的打探着“古怪”的小巷。他们说这和戴望舒的《雨巷》一模一样，就差一把油纸伞啦和丁香一样的姑娘啦！</p>
                    </ul>
                    <ul class="details">
                        <li class="likes"><a href="#">10</a></li>
                        <li class="comments"><a href="#">60</a> </li>
                        <li class="icon_time"><a href="#">2014-10-3</a></li>
                    </ul>
                </div>
            </li>
            
            <li>
                <div class="row_box">
                    <div class="ti"></div><!--三角形-->
                    <div class="ci"></div><!--圆形-->
                    <h2 class="title"> <a href="#">那个翩翩少年</a></h2>
                    <ul class="textinfo">
                        <a href="#"><img src="images/boy.png"></a>
                        <p>那天我们一起游铜山——哦，应该是高考结束后的那个暑假。我们一起相约铜山。然而这个傻逼却穿啦一个拖鞋，竟爬到啦三重天！此时激动的他张开双臂，拥抱蓝天，自称是翩翩少年···</p>
                    </ul>
                    <ul class="details">
                        <li class="likes"><a href="#">10</a></li>
                        <li class="comments"><a href="#">34</a> </li>
                        <li class="icon_time"><a href="#">2014-6-9</a></li>
                    </ul>
                </div>
            </li>
            
            <li>
                <div class="row_box">
                    <div class="ti"></div><!--三角形-->
                    <div class="ci"></div><!--圆形-->
                    <h2 class="title"> <a href="#">我心中的小女孩</a></h2>
                    <ul class="textinfo">
                        <a href="#"><img src="images/girl.png"></a>
                        <p>哈哈，每每看到这张图片，就想到高中后排那个小女孩。记得是在她空间弄下来的，到现在也不能言语当时的情素。亦或是懵懂年少我们的日常，亦或是情窦初开···</p>
                        <p>希望那个女孩，快快乐乐</p>
                    </ul>
                    <ul class="details">
                        <li class="likes"><a href="#">100</a></li>
                        <li class="comments"><a href="#">200</a> </li>
                        <li class="icon_time"><a href="#">2014-1-9</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    
    <!--博客列表部分结束-->
    
    
    <!--右半部分开始-->
        <aside>
            <div class="tuijian">
                <h2>热门文章</h2>
                <ol>
                    <li><span> <strong>1</strong></span><a href="http://user.qzone.qq.com/1971088879/blog/1327811066">朋友们，我爱你们</a></li>
                    <li><span> <strong>2</strong></span><a href="http://user.qzone.qq.com/1971088879/blog/1474634770">终于找到脱坑的理由···</a></li>
                    <li><span> <strong>3</strong></span><a href="https://imxintian.github.io/Demo/school">中国人民大学首页的制作</a></li>
                    <li><span> <strong>4</strong></span><a href="#">有一种思念，是淡淡的幸福,一个心情一行文字</a></li>
                    <li><span> <strong>5</strong></span><a href="#">有一种思念，是淡淡的幸福,一个心情一行文字</a></li>
                    <li><span> <strong>6</strong></span><a href="#">有一种思念，是淡淡的幸福,一个心情一行文字</a></li>
                    <li><span> <strong>7</strong></span><a href="#">有一种思念，是淡淡的幸福,一个心情一行文字</a></li>
                </ol>
            </div>
            <div class="toppic">
                <h2>图文并茂</h2>
                <ul>
                    <li><a href="https://www.douban.com/doulist/31277591/"><img src="images/k01.jpg">腐女不可怕，就怕腐女会画画！<p>伤不起</p></a> </li>
                    <li><a href="#"><img src="images/k02.png">问前任，你还爱我吗？无限戳中泪点~<p>感兴趣</p></a> </li>
                    <li><a href="#"><img src="images/k03.png">世上所谓幸福，就是一个笨蛋遇到一个傻瓜。<p>喜欢</p></a> </li>  
                </ul>
            </div>
            <div class="clicks">
                <h2>热门点击</h2>
                <ol>
                    <li><span><a href="#">慢生活</a></span><a href="#">有一种思念，是淡淡的幸福,一个心情一行文字</a></li>
                    <li><span><a href="#">爱情美文</a></span><a href="#">励志人生-要做一个潇洒的女人</a></li>
                    <li><span><a href="#">慢生活</a></span><a href="#">女孩都有浪漫的小情怀——浪漫的求婚词</a></li>
                    <li><span><a href="#">博客模板</a></span><a href="#">Green绿色小清新的夏天-个人博客模板</a></li>
                    <li><span><a href="#">女生博客模板</a></span><a href="#">女生清新个人博客网站模板</a></li>
                    <li><span><a href="#">wedding</a></span><a href="#">Wedding-婚礼主题、情人节网站模板</a></li>
                    <li><span><a href="#">古典风格</a></span><a href="#">花气袭人是酒香—个人网站模板</a></li>
                </ol>
            </div>
            <div class="search">
                <form class="searchform" method="post" action="#">
                    <input type="text" placeholder="Search" name="s" onFocus="" onBlur="">
                </form>
            </div>
            <div class="viny">
                <dl>
                    <dt class="art"><img src="images/artwork.jpg" alt="专辑"></dt>
                    <dd class="icon_song"><span></span>刚好遇见你</dd>
                    <dd class="icon_artist"><span></span>歌手：李玉刚</dd>
                    <dd class="icon_album"><span></span>所属专辑：《刚好遇见你》</dd>
                    <dd class="icon_like"><span></span><a href="#">喜欢</a></dd>
                    <dd class="music"><audio src="images/李玉刚 - 刚好遇见你.mp3" controls loop></audio></dd>
                </dl>

            </div>
        </aside>
	</div>
    <!--blogs结束-->
</div>
<!--mainbody结束-->
<footer>
    <div class="foot-mid">
        <div class="links">
        	<h2>友情链接</h2>
            <ul>
            	<li><a href="#">王新天的个人博客</a></li>
                <li><a href="#"> 帮助中心</a></li>
            </ul>
        </div>
        <div class="visitors">
        	<h2>最新评论</h2>
            <dl>
            	<dt><img src="images/s.jpg"></dt>
            	<dd>大腿<time>49分钟前</time></dd>
                <dd>在<a href="#" class="title">你能不能做个网站像淘宝那样的？</a>中评论:</dd>
                <dd class="remark">额，淘宝那样，我这里就不做啦，你加把劲，一定能做出来的哦</dd>
            </dl>
             <dl>
            	<dt><img src="images/s1.jpg"></dt>
            	<dd>DanceSmile<time>2小时前</time></dd>
                <dd>在<a href="#" class="title">小红帽女孩的心事儿</a>中评论:</dd>
                <dd class="remark">我手机里面也有这样一个号码存在</dd>
            </dl>
             <dl>
            	<dt><img src="images/s2.png"></dt>
            	<dd>DanceSmile<time>1月7日</time></dd>
                <dd>在<a href="#" class="title">如果个人博客网站再没有价值，你还会坚持吗？</a>中评论:</dd>
                <dd class="remark">博客色彩丰富，很是好看</dd>
            </dl>
        </div>
        <section class="flickr">
        	<h2>摄影作品</h2>
            <ul>
            	<li><a href="#"><img src="images/01.jpg"></a></li>
                <li><a href="#"><img src="images/01.jpg"></a></li>
                <li><a href="#"><img src="images/01.jpg"></a></li>
                <li><a href="#"><img src="images/01.jpg"></a></li>
                <li><a href="#"><img src="images/01.jpg"></a></li>
                <li><a href="#"><img src="images/01.jpg"></a></li>
                <li><a href="#"><img src="images/01.jpg"></a></li>
                <li><a href="#"><img src="images/01.jpg"></a></li>
                <li><a href="#"><img src="images/01.jpg"></a></li>
            </ul>
        </section>
    </div>
    <div class="foot-bottom">
    	 <p>Copyright 2017 Design by <a href="#">imxintian</a></p>
    </div>
</footer>


<div id="tbox"> <a id="togbook" href="#"></a>
 <a id="gotop" href="javascript:void(0)"></a> </div>

</body>
</html>
